import React from 'react';
import {Form, Input, Modal, message, Select, InputNumber} from 'antd';
import {PermissApi} from '@/api/index'

export default class Update extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            id: null,
            permiss: {},
        };
        this.formRef = React.createRef();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.modalVisible !== this.state.modalVisible) {
            this.setState({
                modalVisible: nextProps.modalVisible,
                id: nextProps.id
            }, () => {
                this.getUpdateInf();
            });
        }
    }

    getUpdateInf = async () => {
        let ret = await PermissApi.detail({id: this.state.id});
        if (ret && ret.code === 200) {
            this.setState({
                permiss: ret.data
            })
        }
    }

    handleOk = async e => {
        let data = await this.formRef.current.validateFields();
        data.id=this.state.id
        let ret = await PermissApi.update(data);
        if (ret && ret.code === 200) {
            message.success('修改角色成功！');
            this.close()
        }
    };

    close = () => {
        this.props.onClose && this.props.onClose()
        this.setState({
            modalVisible: false,
        });
    };

    render() {

        const {modalVisible,permiss} =this.state

        const HasContent=(p)=>{
            if (modalVisible){
                return <>{p.children}</>
            }
            return null;
        }

        return (
            <HasContent>
                <Modal
                    title="修改角色"
                    open={modalVisible}
                    onOk={this.handleOk}
                    onCancel={this.close}
                    destroyOnClose={true}
                >
                    <Form ref={this.formRef} wrapperCol={{span: 14}} labelCol={{span: 6}} initialValues={permiss}>
                        <Form.Item name="name" label="名称" rules={[{required: true, message: "请输入名称"}]} >
                            <Input maxLength={20} allowClear autoComplete={"off"}/>
                        </Form.Item>
                        <Form.Item name="type" label="类型">
                            <Select>
                                <Select.Option value={1}>菜单</Select.Option>
                                <Select.Option value={2}>按钮</Select.Option>
                                <Select.Option value={3}>数据</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="express" label="表达式">
                            <Input maxLength={40} allowClear autoComplete={"off"}/>
                        </Form.Item>
                        <Form.Item name="url" label="URL">
                            <Input maxLength={20} allowClear autoComplete={"off"}/>
                        </Form.Item>
                        <Form.Item name="sort" label="排序">
                            <InputNumber allowClear autoComplete={"off"} style={{width:'100%'}}/>
                        </Form.Item>
                    </Form>
                </Modal>
            </HasContent>
        );
    }
}
